<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
<!--    <link rel="StyleSheet" href="../css/backjpetstore.css" type="text/css" media="screen" />-->
    <title>PetStore Management</title>
    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <!--导入jquery-ui-->
    <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <link type="text/css" href="../js/jquery-ui.min.css" rel="stylesheet">
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    body {
        margin: 0ex 10ex 0ex 10ex;
        padding: 0ex;
        font-family: helvetica, tahoma, arial, verdana, sans-serif;
        font-size: 2ex;
        color: #333;
        background-color: #444;
        background-image: url("../image/bgc.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .header{
        float: left;
        width: 100%;
        /*padding-left: 20ex;*/
        /*padding-right: 20ex;*/
    }
    #Logo {
        width: 50%;
        height: 9ex;
        margin: 0ex 0ex 0ex 0ex;
        padding: 0ex 0ex 0ex 0ex;
        border-width: 0ex 0ex .3ex 0px;
        background-color: #000000;
        border-style: solid;
        color: #eaac00;
        float: left;
        line-height: 9ex;
    }
    #Search {
        width: 50%;
        height: 9ex;
        margin: 0ex 0ex 0ex 0ex;
        padding: 0ex 0ex 0ex 0ex;
        border-width: 0ex 0ex .3ex 0px;
        border-style: solid;
        float: left;
        text-align: center;
        background-color: #000000;
        color: #eaac00;
        position: relative;
    }

    #Search input {
        float: left;
        position: absolute;
        border-width: .3ex .3ex .3ex .3ex;
        border-style: solid;
        border-color: #eaac00;
        background-color: #ffffff;
        color: #eaac00;
        height: 3ex;
        font-size: 3ex;
    }
    #Search span{
        display: inline-block;
        float: left;
        position: absolute;
        font-size: 3ex;
    }
    .logo-toperbar{
        display: inline-block;
        float: left;
        position: absolute;
    }
    .back-title{
        float: left;
        width: 55ex;
        display: inline-block;
        position: absolute;
        left: 40ex;
        top: 1.5ex;
    }
</style>
<body>
<header th:fragment="header">
    <div class="header" id="Header">
        <div id="Logo">
                <a class="logo-toperbar" href="main">
<!--                    修改跳转的地址-->
                 <img src="../image/logo-topbar.gif" />
                </a>
                <div class="back-title">
<!--                    <img style="height:100%;width: 100%;" src="../image/back-title.png"/>-->
                </div>
        </div>

        <div id="Search">
            <img style="height:90%;width: 80%;" src="../image/back-title.png"/>
<!--            <div id="SearchContent">-->
<!--                &lt;!&ndash;搜索&ndash;&gt;-->
<!--                <form action="" method="post" id="keyForm">-->

<!--                    &lt;!&ndash;右侧搜索选择复选框&ndash;&gt;-->
<!--                    <span style="left: 5ex;top: 2ex "> category:</span>-->
<!--                   <input style="left: 14ex;top: 2ex;width: 2.5ex" type="checkbox" name="category" id="category"/>-->
<!--                    <span style="left: 18ex;top: 2ex">product:</span>-->
<!--                    <input style="left: 26ex;top: 2ex;width: 2.5ex" type="checkbox" name="product" id="product"/>-->
<!--                    &lt;!&ndash;开启自动补全功能&ndash;&gt;-->
<!--                    <input style="left: 35ex;top: 1.3ex;width: 20ex"id="searchText" type="text" name="keyword" size="14" autocomplete="on"/>-->
<!--                    <input style="left: 56ex;top: 1.8ex;width: 7ex" type="submit" name="searchProducts" value="Search" />-->
<!--                </form>-->
<!--            </div>-->
        </div>
    </div>
    <script>
        $(function (){
            //对搜索输入框的键盘按下后的事件进行监听keyup
            $('#searchText').on("keyup",function (){
                let datas={"word":$('#searchText').val()};
                $.post('/catalog/completeSearch',datas,function (data){

                });
                $.ajax({
                    //连接数据库进行查询
                    type:"GET",
                    url:"/catalog/completeSearch",
                    data:{"keyword":$('#searchText').val()},
                    dataType:"json",
                    success:function (data){
                        console.log("888888888888");
                        //创建数组用于存放获取的产品的名字
                        var searchResult=new Array();
                        for(var i=0;i<data.length;i++){
                            searchResult[i]=data[i].name;
                        }
                        //console.log(searchResult);
                        //将产品名显示在UI控件中
                        $('#searchText').autocomplete({
                            source:searchResult
                        });
                    }
                });
            });
            $('#searchSubmit').on('click',function (e) {
                e.preventDefault();
                console.log("点击搜索按钮");
                let datas = $('#keyForm').serialize();
                $.post('/catalog/searchProduct',datas,function (data){
                    if(data.code === 11)
                    {
                        console.log("搜索成功");
                        location.href = data.msg;
                    }

                });
            });
        });
    </script>
</header>
</body>
</html>